<template>
    <div class="dd-container">
        <div class="step-container">
            <el-steps :active="stepStatus" align-center>
                <el-step title="获得企业授权">
                    <template v-slot:icon>
                        <img src="../../assets/images/step1.png" alt="">
                    </template>
                </el-step>
                <el-step title="企业签署授权书">
                    <template v-slot:icon>
                        <img src="../../assets/images/step2.png" alt="">
                    </template>
                </el-step>
                <el-step title="授权书审核">
                    <template v-slot:icon>
                        <img src="../../assets/images/step3.png" alt="">
                    </template>
                </el-step>
                <el-step title="查看报告">
                    <template v-slot:icon>
                        <img src="../../assets/images/step4.png" alt="">
                    </template>
                </el-step>
            </el-steps>
        </div>
        <div class="content">
            <div class="tax-content">
                <el-form ref="taxFormRef" :model="taxForm" :rules="rules" label-width="auto" class="form"
                    hide-required-asterisk status-icon size="large">
                    <el-form-item label="纳税人识别号" prop="num">
                        <el-input v-model="taxForm.num" placeholder="请输入纳税人识别号" />
                    </el-form-item>
                    <el-form-item label="企业名称" prop="company">
                        <el-input v-model="taxForm.company" placeholder="请输入企业名称" />
                    </el-form-item>
                    <el-form-item label="法人手机号" prop="phoneNum">
                        <el-input v-model="taxForm.phoneNum" placeholder="请输入法人手机号" />
                    </el-form-item>
                    <el-form-item label="手机验证码" prop="SMSNum">
                        <el-input v-model="taxForm.SMSNum" placeholder="请输入手机验证码" />
                        <el-button size="large" class="btn">获取验证码</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="auth">
                <el-checkbox v-model="checked1" label="我已阅读并同意《免责声明》" size="large" />
            </div>
            <div class="btns">
                <el-button size="large" class="btn" @click="onBack">取消查看</el-button>
                <el-button size="large" class="btn" type="primary" @click="onBack">获取授权</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue"

const checked1 = ref(false)
const stepStatus = ref(1)

const taxForm = reactive({
    num: "",
    company: "",
    phoneNum: "",
    SMSNum: ""
})

const rules = reactive({
    num: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ],
    company: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ],
    phoneNum: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ],
    SMSNum: [
        { required: true, message: '必填项，请根据提示填写', trigger: 'blur' },
    ]
})


const onBack = () => {
    history.back()
}

</script>
<style lang="less" scoped>
:deep(.is-required .el-form-item__label::after) {
    content: "*";
    color: #ff0000;
    margin-left: 4px;
}

.dd-container {
    background: #fff;
}

.step-container {
    padding: 100px 200px;
}

.content {
    text-align: center;
    padding-bottom: 100px;

    .tax-content {
        width: 600px;
        margin: 0 auto;

        .form {
            .el-input {
                flex: 1;
            }
        }
    }

    .btns {
        display: flex;
        justify-content: center;

        .btn {
            margin: 30px 50px;
        }
    }
}
</style>